<!-- chrome-top-sites.html -->
<div class="topSites">
  <h2 ng-if="getSetting('topSites.mode') == 'onclick'" ng-click="toggleTop()">
    <div>
      <i class="glyphicon" ng-class="{'glyphicon-chevron-down' : !isShowing, 'glyphicon-chevron-up': isShowing }"></i>
      <a translate>CHROMETOPSITES-click/hdr</a>
      <i class="glyphicon"  ng-class="{'glyphicon-chevron-down' : !isShowing, 'glyphicon-chevron-up': isShowing }"></i>
   </div>
  </h2>
  <h2 ng-if="getSetting('topSites.mode') == 'onhover'">
    <div>
      <i class="glyphicon glyphicon-chevron-down"></i>
      <a translate>CHROMETOPSITES-hover/hdr</a>
      <i class="glyphicon glyphicon-chevron-down"></i>
    </div>
  </h2>
  <ul class="list list-inline">
    <li ng-repeat="site in topSites | limitTo: 12">
      <a href="{{::site.url}}">
        <img lazy-background="https://chromeutils.appspot.com/t/?url={{::site.url}}">
        <p>{{::site.title}}</p>
      </a>
    </li>
  </ul>
</div>
